{% extends 'base.html' %}

{% block title %}自动摘要{% endblock %}

{% block content %}
    <h1>自动摘要</h1>
    <p>请输入一段中文文本：</p>
    <form method="post" style="display: flex; flex-direction: column;">
        {% csrf_token %}
        <textarea name="text" style="width: 100%; height: 150px;">{{ user_input }}</textarea>

        <div style="display: flex; align-items: center; margin-top: 10px;">
            <span style="margin-right: 10px;">摘要句子数量</span>
            <input type="number" name="num" value="{{ num }}" min="1" style="width: 50px; margin-right: auto;" />
            <div class="button-container">
                <input type="submit" value="摘要" class="styled-button">
            </div>
        </div>
    </form>
    {% if show_result %}
        <div>
            <h2>摘要结果</h2>
            <ul>
                {% for item in summary %}
                    <li>{{ item }}</li>
                {% endfor %}
            </ul>
        </div>
    {% endif %}
    <style>
        textarea {
            width: 98%; /* 设置宽度为98% */
            height: 150px; /* 设置高度为150px */
            font-size: 16px; /* 设置字体大小 */
            padding: 10px; /* 内边距 */
            border: 1px solid #ccc; /* 边框颜色 */
            border-radius: 4px; /* 边框圆角 */
            resize: vertical; /* 允许垂直调整大小 */
        }

        h1 {
            text-align: left; /* 标题居中对齐 */
            color: black;
            margin-top: 40px;
        }

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            padding: 20px;
        }

        .button-container {
            display: flex; /* 使用flex布局 */
            justify-content: flex-end; /* 将内容对齐到右侧 */
        }

        .styled-button {
            background-color: #007bff; /* 按钮背景色 */
            color: white; /* 字体颜色 */
            padding: 10px 20px; /* 内边距 */
            border: none; /* 无边框 */
            border-radius: 5px; /* 圆角边框 */
            font-size: 16px; /* 字体大小 */
            cursor: pointer; /* 鼠标指针样式 */
            transition: background-color 0.3s, transform 0.2s; /* 添加过渡效果 */
        }

        .styled-button:hover {
            background-color: #0056b3; /* 悬停时的背景色 */
            transform: scale(1.05); /* 悬停时轻微放大 */
        }

        .styled-button:active {
            transform: scale(0.95); /* 按下时轻微缩小 */
        }

        input[type="number"] {
            width: 50px;
        }
    </style>
{% endblock %}